<template>
  <div class="dashboard-container">
    <button @click="changeDesc('aaa')">修改desc</button>
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <page-tools>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addPerm('0',1)">添加权限</el-button>
        </template>
      </page-tools>
      <!-- 表格 -->
      <!-- 4.【列表功能】 渲染数据 -->
      <!-- 树形表格 添加  row-key树形，值为每条数据唯一的值的键-->
      <!-- 会自动读取每条数据的children树形，渲染下级数据 -->
      <el-table border :data="list" row-key="id">
        <el-table-column align="center" prop="name" label="名称" />
        <el-table-column align="center" prop="code" label="标识" />
        <el-table-column align="center" prop="description" label="描述" />
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button type="text"  @click="addPerm(row.id,2)">添加</el-button>
            <el-button type="text"  @click="editPerm(row.id)">编辑</el-button>
            <el-button type="text"  @click="delPerm(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增、修改的弹框 -->
    <perm-info @update="initData" ref="info"/>
  </div>
</template>
<script>
import { getPermissionList,delPermission } from '@/api/permisson'
import { tranListToTreeData } from '@/utils'
import permInfo from './components/perm-info.vue'
import list from '@/mixins/list'
export default {
  mixins:[list],
  components: { permInfo },
  name:'Permission',
  data() {
    return {
      // 1. 【列表功能】 data定义变量
      // list:[],
      // desc:""  // 个性描述
    }
  },
  created () {
   // 3. 【列表功能】 调用
  //  this.initData()
  },
  methods: {
    //  changeDesc(str){
    //   this.desc = str
    // },
    // 2. 【列表功能】 定义方法
    async initData(){
      //  2.1 发送请求
      let res = await getPermissionList()
      // 2.2 整理数据 和 赋值
      this.list = tranListToTreeData(res,'0')
    },
    //  添加权限
    addPerm(pid,type){
      // pid 就是新添加的元素的pid
      // type 是 权限的类型 1是菜单权限  2 是按钮权限
      this.$refs.info.showDialog = true
      this.$refs.info.formData.pid = pid
      this.$refs.info.formData.type = type
    },
    // 修改权限
    async editPerm(id){
      await this.$refs.info.getInfo(id)
      this.$refs.info.showDialog = true
    },
    // 删除权限
    async delPerm(id){
      await this.$confirm('确认删除吗')
      await delPermission(id)
      this.$message.success('删除成功')
      this.initData()
    }
  },
}
</script>
<style>
</style>
